<!-- topBar -->
<template>
	<view class="module" :style="{ backgroundColor: backgroundColor }">
		<!-- 顶部状态栏占位 -->
		<view v-if="statePerch" :style="{ height: statePerchHeight }"></view>

		<view class="title">
			<!-- 左箭头 -->
			<image v-if="this.arrow == 'black'" class="arrow" :src="arrowBlack" @click="backClick()"></image>
			<image v-if="this.arrow == 'white'" class="arrow" :src="arrowWhite" @click="backClick()"></image>

			<!-- 标题文字 -->
			<view class="title_text" :class="showLocation ? 'title_text2' : ''"
				:style="{ color: titleColor, fontSize: titleSize, fontWeight: titleWeight }">
				{{ title }}
			</view>

			<image v-if="actionIcon" class="action" :src="actionIcon" @click="actionClick"></image>

			<view class="icon1" @click="actionClick">
				<u-icon v-if="actionUIcon" :name="actionUIcon" color="#fff" size="28"></u-icon>
			</view>
			<view v-if="showDot" class="more" @click="actionClick">
				<view class="dot" v-for="(i, index) in 3" :key="index" :style="{ backgroundColor: dotColor }"></view>
			</view>

			<view v-if="showLocation" class="location">
				<u-icon class="icon2" name="map-fill" size="16" color="#9C9C9C"></u-icon>
				<view class="icon3">内蒙古呼和浩特</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'topCommonTitleBar',
	props: {
		//是否留出状态栏的空间
		statePerch: {
			type: Boolean,
			default: true
		},

		//左箭头的样式 none=没有  black=黑箭头  white=白箭头
		arrow: {
			type: String,
			default: 'none'
		},

		//标题文字
		title: String,

		//标题字体颜色
		titleColor: {
			type: String,
			default: '#FFFFFF'
		},

		// 标题字体大小
		titleSize: {
			type: String,
			default: ''
		},

		// 标题字重
		titleWeight: {
			type: String,
			default: ''
		},

		//右边的操作按钮图标
		actionIcon: {
			type: String,
			default: null
		},

		// 右边的u-icon图标
		actionUIcon: {
			type: String,
			default: ''
		},

		showLocation: {
			type: Boolean,
			default: false
		},

		// 显示css+html图标
		showDot: {
			type: Boolean,
			default: false
		},

		isBackClick: {
			type: Boolean,
			default: true
		},

		// dot颜色
		dotColor: {
			type: String,
			default: '#8e8e8e'
		},

		statePerchHeight: {
			type: String,
			default: '56rpx'
		},
		backgroundColor: {
			type: String,
			default: '#ffffff'
		}
	},
	data() {
		return {
			arrowBlack: require('@/static/img/components/ic_arrow_black.png'),
			arrowWhite: require('@/static/img/components/ic_arrow_white.png')
		};
	},
	onLoad() { },
	computed: {
		//是否有右边动作图标
		haveActionIcon() {
			return !(this.actionIcon == null || this.actionIcon == '');
		},

		//右边动作图标base64
		actionImage() {
			if (this.haveActionIcon) {
				return require(this.actionIcon);
			}
		}
	},
	methods: {
		//点击返回
		backClick() {
			this.$emit('backClick');
			if (this.isBackClick)
				uni.navigateBack({
					delta: 1
				});
		},
		//右边图标的点击
		actionClick() {
			this.$emit('actionClick');
		}
	}
};
</script>

<style lang="scss">
.module {
	width: 100%;
	height: auto;

	.title {
		position: relative;
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;

		.icon1 {
			position: absolute;
			right: 14rpx;
			top: 6rpx;
			font-weight: bold;
			font-size: 32rpx;
		}

		.location {
			display: flex;
			align-items: center;
			position: absolute;
			right: 32rpx;
			top: -6rpx;
		}

		.icon2 {
			width: 20rpx;
		}

		.icon3 {
			width: auto;
			font-size: 24rpx;
			color: #9c9c9c;
			margin-top: 20rpx;
		}

		.arrow {
			padding: 20rpx;
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			z-index: 99;
		}

		.title_text {
			width: 590rpx;
			height: 100%;
			text-align: center;
			position: absolute;
			left: 80rpx;
			line-height: 80rpx;
			font-weight: bold;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			/* z-index: 999; */
		}

		.title_text2 {
			width: auto;
		}

		.action {
			/* background-color: black; */
			padding: 20rpx;
			position: absolute;
			width: 80rpx;
			right: 0;
			height: 80rpx;
			z-index: 2;
		}

		.more {
			position: relative;
			top: 28rpx;
			right: -686rpx;
			width: 50rpx;
		}

		.dot {
			border-radius: 50%;
			margin-bottom: 6rpx;
			width: 8rpx;
			height: 8rpx;
		}
	}
}
</style>
